<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（做多吐槽120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" class="btn_sub" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div v-for="(item,i) in commentArr" :key="item._id">
            <div class="list-title">
                第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time}}
            </div>
            <div class="list-body">
                {{item.content}}
            </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    //将Date转化为字符
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o){
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }
    export default {
        data(){
            return {
                pageIndex:1,
                commentArr:[],
                msg:'',
            }
        },
        created(){
            this.getComment();
        },
        methods:{
            getComment(){
                this.$http.get('http://127.0.0.1:3001/getComment?id='+this.id+'&pageIndex='+this.pageIndex).then((result)=>{
                    if(result.body.code === '0'){
                        this.commentArr = this.commentArr.concat(result.body.comment);
                        console.log(result.body.comment);
                    }else{
                        Toast('您的网络抽风了');
                    }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            getMore(){
                this.pageIndex++;
                this.getComment();
            },
            postComment(){
                var id = this.id;
                var content = this.msg;
                var add_time = (new Date()).Format("yyyy-MM-dd");
                if(this.msg.length ===0 ){
                    return Toast('请先输入内容');
                }
                this.$http.post('http://127.0.0.1:3001/addComment',{id:id,content:content,add_time:add_time},{emulateJSON:true}).then((result)=>{
                    //console.log(result.body);
                    if(result.body.code === '0'){
                        Toast(result.body.message);
                       // console.log(result.body.message);
                        var newObj = {
                            id:id,
                            user_name: "ywj",
                            add_time:add_time,
                            content: content,
                            pageIndex: 1
                        };
                        this.commentArr.unshift(newObj);
                        this.msg = '';
                    }else{
                        Toast('您的网络抽风了');
                    }
                }).catch(function (err) {
                    console.log(err);
                });
            },
        },
        props:['id'],

    }

</script>

<style scoped lang="less">
    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 13px;
            height: 100px;
        }
        .btn_sub{

        }
        .cmt-list{
            margin-top: 8px;
            .list-title{
                font-size: 14px;
                line-height: 35px;
                background: gray;
            }
            .list-body{
                font-size: 14px;
                line-height: 40px;
                text-indent: 2em;
            }
        }
    }
</style>